<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'inventory.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>其它出库</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <d-splitter orientation="vertical" disabledBarSize="1px" [splitBarSize]="'1px'" style="height: 100%"
      [showCollapseButton]="true">
      <d-splitter-pane minSize="50%" [size]="'60%'">
        <div class="da-list-container">
          <div class="da-list-header">
            <d-row>
              <d-col [dSpan]="24">
                <div>
                  <input dTextInput style="width: 180px;" [error]="false" placeholder="其它出库单号" name="code"
                    [(ngModel)]="OtherOutboundNum" class="me-2">
                  <d-range-datepicker-pro name="开始结束时间" [(ngModel)]="value1" (ngModelChange)="start$end()">
                  </d-range-datepicker-pro>
                  <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter()"><i
                      class="icon icon-filter-o me-2"></i>查询其它</d-button>
                  <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
                </div>
                <div class="btn-group">
                  <div class="btn-left">
                    <d-button bsstyle="primaryBtn" (click)="add()"> <i class="icon icon-add me-2"></i>新增其它出库</d-button>
                    <d-button (btnClick)="GetLogs()" bsStyle="common">日志</d-button>
                  </div>
                </div>
              </d-col>
            </d-row>
          </div>
      <div class="list-content">
        <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
          [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
          (checkAllChange)="getCheckedRows()" (rowCheckChange)="getCheckedRows()" [resizeable]="true">
          <thead dTableHead [checkable]="true">
            <tr dTableRow>
              <th dHeadCell [fixedLeft]="'80px'">
                <span>操作</span>
              </th>
              <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
            </tr>
          </thead>
          <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
              <tr dTableRow (click)="showDetail(rowItem,rowIndex)">
                <td dTableCell [fixedLeft]="'0px'">
                  <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                    [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked" [showGlowStyle]="false"
                    (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"></d-checkbox>
                </td>
                <td dTableCell [rowItem]="rowItem" [fixedLeft]="'80px'">
                  <span><a class="devui-link ms-3" (click)="edit(rowItem.otherOutboundModelId)"
                      [class.disabled]="rowItem.isAudit">编辑</a></span>
                  <span><a class="devui-link ms-3" (click)="detailed(rowItem.otherOutboundModelId)">查看</a></span>
                  <span><a class="devui-link ms-3" (click)="isAudit(rowItem)"
                      [class.disabled]="rowItem.isAudit">审核</a></span>
                  <span><a class="devui-link ms-3" (click)="chuku(rowItem.otherOutboundModelId)"
                      [class.disabled]="!rowItem.isAudit || rowItem.isOutbound">出库</a></span>
                  <span class="ms-3"><a class="devui-link-danger" [class.disabled]="rowItem.isAudit"
                      (click)="DeleteRole(rowItem)">删除</a></span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.otherOutboundNum">{{ rowItem?.otherOutboundNum}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip
                    [content]="rowItem?.dateTime | date:'yyyy-MM-dd'">{{ rowItem?.dateTime | date:'yyyy-MM-dd'}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.isOutbound | booleanToText:'已出库':'待出库'">
                    <d-tag [tag]=" rowItem?.isOutbound | booleanToText:'已出库':'待出库'"
                      [labelStyle]="rowItem?.isOutbound"></d-tag>
                  </span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.isAudit | booleanToText:'已审核':'待审核'">
                    <d-tag [tag]=" rowItem?.isAudit | booleanToText:'已审核':'待审核'" [labelStyle]="rowItem?.isAudit">
                    </d-tag>
                  </span>
                </td> 
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.note">{{rowItem?.note}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.createUser">{{ rowItem?.createUser}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.createTime">{{ rowItem?.createTime }}</span>
                </td>
                <td dTableCell>
                  <span class="ellipsis" (click)="GetLogById(rowItem)"> <a class="devui-link">查看</a></span>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </d-data-table>
      </div>
      <div class="page-footer">
        <div>
          <p>已选 <span class="underline">{{checkedIds.length}}</span> 条其它记录
            <a (click)="cleared()" class="cleared">清空</a>
          </p>
        </div>
        <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true" [maxItems]="5"
          [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
          [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
          (pageSizeChange)="pageSizeChange($event)">
        </d-pagination>
      </div>
    </div>
      </d-splitter-pane>
      <d-splitter-pane class="detailTable" style="overflow: hidden;" [collapsible]="true">
        <div class="da-list-container">
          <div class="list-content">
            <h4 style="padding: 10px; margin: 0; background-color: #f5f5f5; border-bottom: 1px solid #ddd;">其它出库详情信息</h4>
          <d-data-table [dataSource]="ingredientDetail" [lazy]="true" [scrollable]="true" [fixHeader]="true"
            [scrollable]="true" [resizeable]="true" [tableWidthConfig]="tableWidthConfig2">
            <thead dTableHead>
              <tr dTableRow>
                <th dHeadCell>
                  <span>其它编码</span>
                </th>
                <th dHeadCell>
                  <span>其它名称</span>
                </th>
                <th dHeadCell>
                  <span>规格型号</span>
                </th>
                <th dHeadCell>
                  <span>其它描述</span>
                </th>
                <th dHeadCell>
                  <span>出库数量</span>
                </th>
                <th dHeadCell>
                  <span>单位</span>
                </th>
                <th dHeadCell>
                  <span>单价</span>
                </th>
                <th dHeadCell>
                  <span>金额</span>
                </th>
                <th dHeadCell>
                  <span>出库用途</span>
                </th>
                <th dHeadCell>
                  <span>领用人</span>
                </th>
                <th dHeadCell>
                  <span>出库日期</span>
                </th>
                <th dHeadCell>
                  <span>原库位</span>
                </th>
                <th dHeadCell>
                  <span>备注</span>
                </th>
              </tr>
            </thead>
            <tbody dTableBody>
              <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                <tr dTableRow>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.ingredientCode">{{rowItem.ingredientCode}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.ingredientName">{{rowItem.ingredientName}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.specification">{{rowItem.specification}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.description">{{rowItem.description}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.quantity">{{rowItem.quantity}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.unit">{{rowItem.unit}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.unitPrice">{{rowItem.unitPrice}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.totalAmount">{{rowItem.totalAmount}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.purpose">{{rowItem.purpose}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.recipient">{{rowItem.recipient}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.outboundDate | date:'yyyy-MM-dd'">{{rowItem.outboundDate | date:'yyyy-MM-dd'}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.originalLocation">{{rowItem.originalLocation}}</span>
                  </td>
                  <td dTableCell>
                    <span dTooltip [content]="rowItem.remark">{{rowItem.remark}}</span>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </d-data-table>
        </div>
        </div>
      </d-splitter-pane>
    </d-splitter>

  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
